<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
</head>
<body>
<!--<h1>Bootstrap</h1>-->
<div class=""></div>
<div class="container">

  <!-- 标准的按钮 -->
  <button type="button" class="btn btn-default">默认按钮</button>
  <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
  <button type="button" class="btn btn-primary">原始按钮</button>
  <!-- 表示一个成功的或积极的动作 -->
  <button type="button" class="btn btn-success">成功按钮</button>
  <!-- 信息警告消息的上下文按钮 -->
  <button type="button" class="btn btn-info">信息按钮</button>
  <!-- 表示应谨慎采取的动作 -->
  <button type="button" class="btn btn-warning">警告按钮</button>
  <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
  <button type="button" class="btn btn-link ">链接按钮</button>
  <!-- 表示一个危险的或潜在的负面动作 -->
  <button type="button" class="btn btn-danger ">危险按钮</button>
  <!-- 表示一个危险的或潜在的负面动作 -->
  <button type="button" class="btn btn-default disabled">禁用的按钮</button>
</div>



<!--
<div>
  <button type="button" class="btn btn-default btn-lg">大默认按钮</button>
</div>

btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。
btn-lg	    这会让按钮看起来比较大。
btn-sm	    这会让按钮看起来比较小。
btn-xs	    这会让按钮看起来特别小。

btn-group-lg  大
btn-group-sm  小
btn-group-xs  很小


<h3>默认大小按钮:</h3>
<div class="btn-group ">
  <button type="button" class="btn btn-primary">一号按钮</button>
  <button type="button" class="btn btn-primary">二号按钮</button>
  <button type="button" class="btn btn-primary">三号按钮</button>
</div>

-->


</body>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</html>